feat(clerk-js): Add dev mode warning to components (#3511) #3870

octoper · 2024-08-01T08:49:05Z

Description

Adding a development mode warning to our components to avoid going to productions with development keys by accident.

To be able to disable the development mode warning in order to preview how the components will look like in production the appearance.layout.unsafe_disableDevelopmentModeWarnings key has been added.

Example usage:

Globally using the <ClerkProvider />:

<ClerkProvider appearance={{
 layout: {
   unsafe_disableDevelopmentModeWarnings: true,
  }
}}>
...
</ClerkProvider>

On each component:

<UserProfile appearance={{
 layout: {
   unsafe_disableDevelopmentModeWarnings: true,
  }
}} />

Original PR: #3511

Screenshots

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

…ment mode notice

Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>

changeset-bot · 2024-08-01T08:49:08Z

🦋 Changeset detected

Latest commit: 109b698

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/types	Minor
@clerk/astro	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch
@clerk/themes	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

octoper · 2024-08-01T08:51:24Z

!preview

clerk-cookie · 2024-08-01T08:56:57Z

Hey @octoper, your preview is available.

Status	Preview	Updated (UTC)
🍪 Deployed	Visit preview	Aug 01, 2024 08:20 PM

thiskevinwang · 2024-08-01T16:24:05Z

packages/clerk-js/src/core/resources/DisplayConfig.ts

    this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
    this.afterCreateOrganizationUrl = data.after_create_organization_url;
    this.googleOneTapClientId = data.google_one_tap_client_id;
+    this.showDevModeWarning = data.show_devmode_warning;


…pearance.layout.unsafe_disableDevelopmentModeWarnings option

octoper · 2024-08-01T20:12:18Z

!preview

octoper · 2024-08-02T10:05:02Z

!snapshot

clerk-cookie · 2024-08-02T10:13:13Z

Hey @octoper - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.0.5-snapshot.v741fdbd
@clerk/backend	1.5.0-snapshot.v741fdbd
@clerk/chrome-extension	1.1.8-snapshot.v741fdbd
@clerk/clerk-js	5.11.0-snapshot.v741fdbd
@clerk/elements	0.11.0-snapshot.v741fdbd
@clerk/clerk-expo	2.0.1-snapshot.v741fdbd
@clerk/express	0.0.22-snapshot.v741fdbd
@clerk/fastify	1.0.24-snapshot.v741fdbd
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/localizations	2.5.3-snapshot.v741fdbd
@clerk/nextjs	5.2.9-snapshot.v741fdbd
@clerk/clerk-react	5.3.0-snapshot.v741fdbd
@clerk/remix	4.2.8-snapshot.v741fdbd
@clerk/clerk-sdk-node	5.0.21-snapshot.v741fdbd
@clerk/shared	2.4.2-snapshot.v741fdbd
@clerk/tanstack-start	0.1.12-snapshot.v741fdbd
@clerk/testing	1.2.4-snapshot.v741fdbd
@clerk/themes	2.1.15-snapshot.v741fdbd
@clerk/types	4.10.0-snapshot.v741fdbd

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.0.5-snapshot.v741fdbd --save-exact

@clerk/backend

npm i @clerk/backend@1.5.0-snapshot.v741fdbd --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.8-snapshot.v741fdbd --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.11.0-snapshot.v741fdbd --save-exact

@clerk/elements

npm i @clerk/elements@0.11.0-snapshot.v741fdbd --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.0.1-snapshot.v741fdbd --save-exact

@clerk/express

npm i @clerk/express@0.0.22-snapshot.v741fdbd --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.24-snapshot.v741fdbd --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/localizations

npm i @clerk/localizations@2.5.3-snapshot.v741fdbd --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.2.9-snapshot.v741fdbd --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.3.0-snapshot.v741fdbd --save-exact

@clerk/remix

npm i @clerk/remix@4.2.8-snapshot.v741fdbd --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.21-snapshot.v741fdbd --save-exact

@clerk/shared

npm i @clerk/shared@2.4.2-snapshot.v741fdbd --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.1.12-snapshot.v741fdbd --save-exact

@clerk/testing

npm i @clerk/testing@1.2.4-snapshot.v741fdbd --save-exact

@clerk/themes

npm i @clerk/themes@2.1.15-snapshot.v741fdbd --save-exact

@clerk/types

npm i @clerk/types@4.10.0-snapshot.v741fdbd --save-exact

desiprisg and others added 11 commits July 31, 2024 16:34

feat(clerk-js): Add dev mode notice to components

2ec5137

feat(clerk-js): Update Development notice to match designs

4a2f63b

chore(clerk-js): Add dev notice to footer

7682753

fix(clerk-js): Remove missing prop from ClerkAndPagesTag

23548e9

chore(repo): Remove changes from playgrounf

1f75627

chore(repo): Revert change from webpack.config.js

b285473

fix(clerk-js): Apply Dev mopde notice better for all componentns

cea4ecb

chore(clerk-js): Added popoverBox descriptor and UI fixes for develop…

1d55b29

…ment mode notice

chore(repo): Update changeset

afb90c5

chore(repo): Update changeset

c5eece0

Update .changeset/hungry-clouds-return.md

79dd3a9

Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>

clerk-cookie added types clerk-js labels Aug 1, 2024

octoper changed the title ~~feat(clerk-js): Add dev mode notice to components~~ feat(clerk-js): Add dev mode notice to components (#3511) Aug 1, 2024

anagstef approved these changes Aug 1, 2024

View reviewed changes

feat(clerk-js): Added showDevModeWarning in DisplayConfigResource

101068f

thiskevinwang reviewed Aug 1, 2024

View reviewed changes

feat(clerk-js): Added internal useDevMode hook and also introduced ap…

b2f4635

…pearance.layout.unsafe_disableDevelopmentModeWarnings option

clerk-cookie added the playground label Aug 1, 2024

octoper changed the title ~~feat(clerk-js): Add dev mode notice to components (#3511)~~ feat(clerk-js): Add dev mode warning to components (#3511) Aug 1, 2024

octoper requested a review from anagstef August 1, 2024 20:24

chore(clerk-js): Remove wrong padding when dev mode warning are enabled

741fdbd

octoper marked this pull request as ready for review August 2, 2024 12:56

octoper requested a review from alexcarpenter August 2, 2024 12:57

octoper requested review from brkalow and panteliselef August 2, 2024 12:57

chore(repo): Update changeset

109b698

alexcarpenter approved these changes Aug 2, 2024

View reviewed changes

octoper merged commit 568186c into main Aug 2, 2024

octoper deleted the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch August 2, 2024 15:07

clerk-cookie mentioned this pull request Aug 2, 2024

ci(repo): Version packages #3891

Merged

alexcarpenter mentioned this pull request Aug 2, 2024

feat(ui): Add useDevModeWarning hook #3895

Merged

9 tasks

LekoArts mentioned this pull request Aug 12, 2024

fix(clerk-js): Add dev mode warning to console #3930

Merged

9 tasks

clerk-cookie mentioned this pull request Aug 13, 2024

ci(repo): Version packages #3923

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(clerk-js): Add dev mode warning to components (#3511) #3870

feat(clerk-js): Add dev mode warning to components (#3511) #3870

Uh oh!

octoper commented Aug 1, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Aug 1, 2024 •

edited

Loading

Uh oh!

octoper commented Aug 1, 2024

Uh oh!

clerk-cookie commented Aug 1, 2024 •

edited

Loading

Uh oh!

thiskevinwang Aug 1, 2024

Uh oh!

octoper commented Aug 1, 2024

Uh oh!

octoper commented Aug 2, 2024

Uh oh!

clerk-cookie commented Aug 2, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

feat(clerk-js): Add dev mode warning to components (#3511) #3870

feat(clerk-js): Add dev mode warning to components (#3511) #3870

Uh oh!

Conversation

octoper commented Aug 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Example usage:

Screenshots

Checklist

Type of change

Uh oh!

changeset-bot bot commented Aug 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

octoper commented Aug 1, 2024

Uh oh!

clerk-cookie commented Aug 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thiskevinwang Aug 1, 2024

Choose a reason for hiding this comment

Uh oh!

octoper commented Aug 1, 2024

Uh oh!

octoper commented Aug 2, 2024

Uh oh!

clerk-cookie commented Aug 2, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

octoper commented Aug 1, 2024 •

edited

Loading

changeset-bot bot commented Aug 1, 2024 •

edited

Loading

clerk-cookie commented Aug 1, 2024 •

edited

Loading